<template>
  <button @click="updateLocation">click update location</button>
  <MyMarker />
</template>

<script>
import { provide, reactive, ref, readonly } from "vue"
import MyMarker from './MyMarker.vue'

export default {
  components: {
    MyMarker
  },
  setup() {
    // provide('location', 'North Pole')
    // provide('geolocation', {
    //   longitude: 90,
    //   latitude: 135
    // })

    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })
    const updateLocation = () => {
      console.log("updateLocation...");
      location.value = "South Pole"
    }

    provide("location", readonly(location))
    provide("geolocation", readonly(geolocation))
    provide("updateLocation", updateLocation)

    return{
      updateLocation
      // location
    }

  },
  methods: {
    // updateLocation() {
    //   console.log("methods updateLocation...");
    //   this.location = 'South Pole'
    // }
  }
}
</script>